<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>户外跑步</title>
</head>

<body>

    <div class="outDoor ">

        <!-- 头部 -->
        <div class="dpflex">
        <!-- 头部的左边盒子 -->
        <div class="outDoor-left">
            <p class="p1">户外跑</p>
            <p class="p2">运动中</p>
        </div>

        <!-- 头部的右边盒子 -->
        <div class="outDoor-right">
            <span class="iconfont icon-yinle"></span>
            <span class="iconfont icon-fenlei"></span>
        </div>
        </div>

        <!-- 跑步公里数盒子 -->
        <div class="outDoor-main">
            <p>
                <span>22.88</span> 
                <span class="span1">公里</span>
            </p>
        </div>

        <!-- GPS -->

        <div class="dpflex outDoor-gps">
            <p class="">GPS信号度低, 数据精准度低</p>
            <p class="iconfont icon-dingwei" id="GPSBtn"></p>
        </div>

        <!-- 配速 -->

        <div class="outDoor-pace dpflex">
            <div class="dpflex fdcolumn peisu">
                <i class="iconfont icon-peisu"></i>
                <span>配速</span>
                <span class="peisuTime">--</span>

            </div>
            <div class="dpflex fdcolumn" >
                <i class="iconfont icon-shijiyongshi"></i>
                <span>用时</span>
                <span class="peisuTime">00:01:20</span>

            </div>
            <div class="dpflex fdcolumn">
                <i class="iconfont icon-reliang"></i>
                <span>千卡</span>
                <span class="peisuTime">3000</span>
            </div>

        </div>

        <!-- 配速时间
        <div class="peisuTime dpflex">
            <p>--</p>
            <p>00:00:20</p>
            <p>3000</p>
        </div> -->

        <!-- 运动暂停 -->
        <div class="running">
            <div class="outDoor-runOut dpflex">

                <!-- 空白div占位 -->
                    <div class="outDoor-run3">
                    </div>
                    <div class="outDoor-run1 dpflex fdcolumn">
                        <i class="iconfont icon-zanting"></i>
                        <span>暂停</span>
                    </div>

                    <div class="outDoor-run2 dpflex fdcolumn">
                        <i class="iconfont icon-suo"></i>
                    </div>

            </div>

            <!-- 运动开始和结束 -->
            <div class="outDoor-status dpflex">
                <div class="outDoor-start dpflex fdcolumn">
                    <i class="iconfont icon-jixugongxiang"></i>
                    <span>继续</span>
                </div>
                <div class="outDoor-stop dpflex fdcolumn">
                    <i class="iconfont icon-jieshu"></i>
                        <span>结束</span>
                </div>
            </div>
        </div>
    </div>

    
</body>
</html>